<template>
	<el-container v-loading="loading">
		<el-header style="height: auto;">
			<sc-select-filter :data="filterData" :label-width="80" @on-change="tabChange">
			</sc-select-filter>
		</el-header>
		<el-header>
			<div class="left-panel">
				<fsButton ref="button" plain size="default" :buttons="buttons" @clickHandler="buttonHandler"></fsButton>
			</div>
			<div class="right-panel">
				<ex-search ref="search" :searches="searches" @searchOk="searchHandler" :initParams="{}"></ex-search>
			</div>
		</el-header>
		<el-main class="nopadding">
			<div>
				<scEcharts ref="myCharts" height="300px" :option="option" @clicks="chartsClick"></scEcharts>
			</div>
			<div>
				<template v-if="assetStatisticsType === '1'">
					<el-table :data="assetData" border show-summary style="width: 100%">
						<el-table-column prop="name" label="部门名称" width="180">
						</el-table-column>
						<el-table-column prop="assetCount" label="转移数量" width="180">
						</el-table-column>
						<el-table-column prop="originalValue" label="原值" width="">
						</el-table-column>
						<el-table-column prop="netValue" label="净值" width="180">
						</el-table-column>
					</el-table>
				</template>
				<template v-if="assetStatisticsType === '2'">
					<el-table :data="assetData" border show-summary style="width: 100%">

						<el-table-column prop="name" label="资产类别" width="180">
						</el-table-column>
						<el-table-column prop="assetCount" label="转移数量" width="180">
						</el-table-column>
						<el-table-column prop="originalValue" label="原值" width="">
						</el-table-column>
						<el-table-column prop="netValue" label="净值" width="180">
						</el-table-column>
					</el-table>
				</template>
			</div>
		</el-main>
	</el-container>
	<data-card ref="dataCard"></data-card>
</template>

<script>
import ExTable from "@/components/exTable/index.vue";
import ExSearch from "@/components/exSearch/index.vue";
import ExTreeNavigation from "@/components/exSearchTree/index.vue";
import ExSearchTree from "@/components/exSearchTree/index.vue";
import scSelectFilter from "@/components/scSelectFilter/index.vue";
import tool from "@/utils/tool";
import DataCard from "@/views/asset/card/card.vue";
import scEcharts from "@/components/scEcharts/index.vue";
import print from "@/utils/print";
import globalparam from "@/constant/model/globalparam";
export default {
	name: 'column',
	components: {
		scEcharts,
		DataCard,
		scSelectFilter,
		ExSearchTree,
		ExTreeNavigation,
		ExSearch,
		ExTable,
	},
	data() {
		return {
			dialog: {
				save: false,
				permission: false,
			},
			apiObj: [],
			buttons: [
				{name: "导出", icon: "el-icon-download", click: "export", permission: ""},
				{name: "打印", icon: "el-icon-download", click: "print", permission: ""},
			],
			searches: [
				{type: "tree-select", name: "转出部门", code: "OutDepartmentIds", placeholder: "请选择转出部门", dictCode:'SysOrganization',checkStrictly:false,multiple:true},
				{type: "tree-select", name: "转入部门", code: "usingDepartmentIds", placeholder: "请选择转入部门", dictCode:'SysOrganization',checkStrictly:false,multiple:true},
				{type: "tree-select", name: "资产类别", code: "assetCategoryIds", placeholder: "请选择资产类别", dictCode:'FamsAssetCategory',checkStrictly:false,multiple:true},
				{type: "daterange", name: "转移日期", code: "zczyDateStart,zczyDateEnd", placeholder: "请选择转移日期", formatter:"YYYY-MM-dd",valueFormat:"YYYYMMDD",range:30},
			],
			filterData: [
				{
					title: "统计方式",
					key: "assetStatisticsType",
					multiple: false,
					options: [
						{
						label: "按管理部门统计",
						value: "1"
						},
						{
							label: "按资产分类统计",
							value: "2"
						},
					]
				},
			],
			option : {
				title: {
					text: '资产转移统计报表',
					subtext: '',
				},
				legend: {
					data: ['数量', '原值', '净值']
				},
				grid: {
					top: '80px'
				},
				tooltip: {
					trigger: 'axis'
				},
				xAxis: {
					type: 'category',
					data: [],
					axisLabel: {
						interval: 0, // 横轴信息全部显示
						rotate: -90, // -90度角倾斜显示
					},
					triggerEvent:true,
				},
				yAxis: {
					type: 'value',
					triggerEvent:true,
				},
				series: [
					{
						data: [],
						type: 'bar',
						name:'数量',
						barWidth: '15px',
					},
					{
						data: [],
						type: 'bar',
						name:'原值',
						barWidth: '15px',
					},
					{
						data: [],
						type: 'bar',
						name:'净值',
						barWidth: '15px',
					},
					]
			},
			parentLevelCode:"",
			assetIds:[],
			loading: false,
			assetData:[],
			zczyDateStart:"",
			zczyDateEnd:"",
			assetStatisticsType: "1",
			assetStatisticsRange:"",
			readDeptIds: this.$TOOL.current.readDeptIds(),
			manageCategoryIds: this.$TOOL.current.manageAssetCategoryIds(),
			assetCategoryList:[],
			deptList:[],
			loginUsers: this.$TOOL.current.user(),
		}
	},
	created() {
	},
	mounted() {
		this.$cache.data.loadGlobalParam(globalparam.assetStatisticsRange.paramCode).then((res) => {
			this.assetStatisticsRange = res;
			this.loading = true;
			let queryParams = {}
			this.formatQueryParams(queryParams,this);
			this.$API.asset.assetLog.countTransferTimes.post(queryParams).then((rsp) =>{
				this.loading = false;
				if(rsp.code === 2000 && rsp.data){
					this.option.xAxis.data = rsp.data.xaxisData;
					this.option.series[0].data = rsp.data.seriesData.assetCount;
					this.option.series[1].data = rsp.data.seriesData.originalValue;
					this.option.series[2].data = rsp.data.seriesData.netValue;
					this.option.title.subtext = "(" +rsp.data.zczyDateStart+"至"+rsp.data.zczyDateEnd+")";
					this.zczyDateStart = rsp.data.zczyDateStart;
					this.zczyDateEnd = rsp.data.zczyDateEnd;
					this.assetData = rsp.data.assetVos;
					this.assetCategoryList = rsp.data.assetCategoryVos;
					this.deptList = rsp.data.deptList;
				}
			});
		});

	},
	beforeMount() {
	},
	methods: {
		buttonHandler(index, name) {
			this.$options.methods[name](this, index);
		},
		async searchHandler() {
			this.loading = true;
			this.$refs.search.drawer = false;
			let queryParams = {}
			this.formatQueryParams(queryParams,this);
			let rsp = await this.$API.asset.assetLog.countTransferTimes.post(queryParams);
			if(rsp.code === 2000 && rsp.data){
				this.option.xAxis.data = rsp.data.xaxisData;
				this.option.series[0].data = rsp.data.seriesData.assetCount;
				this.option.series[1].data = rsp.data.seriesData.originalValue;
				this.option.series[2].data = rsp.data.seriesData.netValue;
				this.option.title.subtext = "(" +rsp.data.zczyDateStart+"至"+rsp.data.zczyDateEnd+")";
				this.zczyDateStart = rsp.data.zczyDateStart;
				this.zczyDateEnd = rsp.data.zczyDateEnd;
				this.assetData = rsp.data.assetVos;
				this.assetCategoryList = rsp.data.assetCategoryVos;
				this.deptList = rsp.data.deptList;
				this.loading = false;
			}else{
				this.loading = false;
			}
		},
		//导出
		async export(_this,index) {
			_this.$refs.button.loading(index, true);
			let queryParams = {};
			_this.fomateQueryParams(queryParams,_this);
			queryParams.exportType = "transfer";
			let res = await _this.$API.asset.assetLog.export.post(queryParams);
			if (res.code === 2000) {
				await _this.$alert(_this.$t('common.export_request_success'), "提示", {type: 'success'}).catch(()=>{});
			}
			_this.$refs.button.loading(index, false);
		},
		//标签切换
		async tabChange(name){
			this.assetStatisticsType = name.assetStatisticsType;
			await this.searchHandler();
		},
		print(){
			//直接传入REF或者querySelector
			window.print();
		},
		chartsClick(params){
			let queryParams = {};
			if(!queryParams.zczyDateStart){
				queryParams.zczyDateStart = this.zczyDateStart.replace(/-/g,"");
			}
			if(!queryParams.zczyDateEnd){
				queryParams.zczyDateEnd = this.zczyDateEnd.replace(/-/g,"");
			}
			this.formatQueryParams(queryParams,this);
			if(this.assetStatisticsType === "1") {
				queryParams.dutyDepartmentId = this.deptList[params.dataIndex].id;
				this.searchAsset(this.deptList[params.dataIndex].orgName,queryParams);
			}else if(this.assetStatisticsType === "2"){
				queryParams.assetCategoryId = this.assetCategoryList[params.dataIndex].id;
				this.searchAsset(this.assetCategoryList[params.dataIndex].name,queryParams);
			}
		},
		searchAsset(item,queryParams) {
			let title = "转移统计"+item+"资产明细";
			//跳转到搜索台账页面
			let fromRouteId = this.$TOOL.crypto.MD5(this.$route.path);//当前页面的路由地址
			let key = this.$TOOL.crypto.MD5(title);//可以做为key的关键字段或内容
			/**
			 *  1 = 根据管理部门，根据登录账户管理范围，资产的管理部门在账户管理范围内的显示<br>
			 *  2 = 根据使用部门，根据登录账户管理范围，资产的使用部门在账户管理范围内的显示<br>
			 *  3 = 根据管理部门或使用部门，根据登录账户管理范围，资产的使用部门或管理部门在账户管理范围内的显示<br>
			 *  其它 = 根据管理部门，按台账，根据使用部门或管理部门或借用部门在管理范围内的
			 */
			//设置搜索参数
			let routeParams = {
				id: key,
				title: title,
				fixedParams:{
					assetStatisticsRange:queryParams.assetStatisticsRange,
					deptIds:queryParams.deptIds,
				},//固定搜索参数，打开页面后，用户通过搜索界面的清空按钮无法清除
				searchParams: queryParams
			};
			this.$store.dispatch("addRouteParams", routeParams);
			this.$router.push({
				name: "toAssetLog",
				params: {fromRouteId: fromRouteId, key: key}
			});
		},
		formatQueryParams(queryParams,_this){
			queryParams.assetStatisticsRange = _this.assetStatisticsRange;
			queryParams.assetStatisticsType = _this.assetStatisticsType;
			queryParams.deptIds = _this.readDeptIds;
			Object.assign(queryParams, _this.$refs.search.searchParams());
			if(!queryParams.usingDepartmentIds||queryParams.usingDepartmentIds.length===0){
				queryParams.usingDepartmentIds = [];
				queryParams.usingDepartmentIds.push(_this.loginUsers.orgId);
			}
			if(!queryParams.OutDepartmentIds||queryParams.OutDepartmentIds.length===0){
				queryParams.OutDepartmentIds = [];
				queryParams.OutDepartmentIds.push(_this.loginUsers.orgId);
			}
			if(!queryParams.assetCategoryIds || queryParams.assetCategoryIds.length===0){
				queryParams.assetCategoryIds = _this.manageCategoryIds;
			}
		},
	}
}

</script>
<style scoped>

</style>
